<template>
  <div>
    <nav-com left_text="" @left-click="$router.back()" bg_color="#fafafa">
      <template #icon_left>
        <span class="iconfont icon-xiangzuojiantou"></span>
      </template>
      <template #title>
        <input type="text" class="searchBox" placeholder="请输入关键字" />
      </template>
      <template #icon_right>
        <span class="iconfont icon-sousuo"></span>
      </template>
    </nav-com>
    <div class="nav-main">
        <div @click="showLay=true" :class="{'active':searchObj.main_sort==4||searchObj.main_sort==0}">
            {{val1}} <span style="font-size:.2rem">V</span>
        </div>
        <div @click="a()" :class="{'sel':searchObj.main_sort==1}">
            销量
        </div>
        <div @click="setSortPrice()" :class="{'sel':searchObj.main_sort==2}">
            <span :class="{'active':searchObj.main_sort=2}">
            价格
            </span>
            <span class="col">
                <span class="xxsmall" :class="{'act':searchObj.sort_by=='asc'}">▲</span>
                <span class="xxsmall" :class="{'act':searchObj.sort_by=='dsc'}">▼</span>
            </span>
        </div>
        <div>
            筛选
        </div>
    </div>
    <div class="lay" v-if="showLay">
        <div class="item" @click="searchIt(4,'新品')">
            新品优先
        </div>
        <div class="item" @click="searchIt(0,'综合')">
            综合排序
        </div>
    </div>
    <!-- <div>
        {{searcww}}view_search_product
    </div> -->
    <!-- {{searcww}} -->
    <div class="list" v-if="searcww.list_v2">
      <div
        class="item"
        v-for="product in searcww.list_v2"
        :key="product.body.product_id"
      >
        <view-search-product
          :data="product.body"
          v-if="product.view_type == 'view_search_product'"
        ></view-search-product>
      </div>
    </div>
  </div>
</template>
<script>
import ViewSearchProduct from "@/components/ViewSearchProduct.vue";
import NavCom from "@/components/NavCom.vue";
import { Search } from "@/api/search.js";
export default {
  components: {
    NavCom,
    ViewSearchProduct,
  },
  data() {
    return {
      searcww: [],
      val1:'新品',
      showLay:false,
      searchObj: {
        query: "",
        client_id: 180100031051,
        channel_id: "",
        webp: 1,
        version: 2,
        page_index: 1,
        page_size: 20,
        activity_id: "",
        activity_type: "",
        main_sort:1
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    a(){
        this.searchObj.main_sort=1;
        console.log("sss");
        console.log(this.searchObj.main_sort);
    },
    search() {
      Search(this.searchObj).then((res) => {
        this.searcww = res.data.data;
        console.log(res.data);
      });
    },
    searchIt(main_sort,val1){
        this.$set(this.searchObj,"main_sort",main_sort);
        this.search();
        this.showLay=false;
        this.val1=val1;
    },
    setSortPrice(){
        this.$set(this.searchObj,"main_sort",2);
        if(!this.searchObj.sort_by){
            this.$set(this.searchObj,"sort_by",'asc')
        }else{
            if(this.searchObj.sort_by==='asc'){
                this.searchObj.sort_by='dsc'
            }else{
                this.searchObj.sort_by='asc'
            }
        }
        this.search();
    }
  },
};
</script>
<style lang="scss" scoped>
.nav-main {
  display: flex;
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #fafafa;
}
.nav-main .active {
  color: #f70;
}
.nav-main > div {
  flex: 1;
  text-align: center;
  .xxsmall {
    font-size: 0.2rem;
    transform: scale(0.7);
  }
}
.lay {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 1.76rem;
  left: 0;
  right: 0;
  bottom: 0;
}
.nav-main .sel .act.xxsmall {
  color: #f70 !important;
}
.lay .item {
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #fff;
  padding: 0 0.3rem;
}

.searchBox {
  flex: 1;
  line-height: 0.6rem;
  width: 100%;
  border: none;
  background-color: #fff;
}
</style>
